<template>
  <div class="device-box">
    <div class="search-box box-shadow">
      <a-form
          ref="deviceRef"
          :model="deviceFormState"
          layout="inline">
        <a-form-item label="归属标段" class="right-margin">
          <a-select mode="multiple"
                    v-model:value="deviceFormState.sectionId">
            <a-select-option v-for="section in sections" :key="section.sectionId" :value="section.sectionId">
              {{ section.sectionName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车辆编码" class="right-margin">
          <a-input v-model:value="deviceFormState.deviceSn"/>
        </a-form-item>
        <a-form-item label="车辆名称" class="right-margin">
          <a-input v-model:value="deviceFormState.deviceName"/>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-model:value="deviceFormState.checkStatus">
            <a-select-option v-for="item in vehicleStatusDict.dict" :key="item.key" :value="item.key">
              {{ vehicleStatusDict.getStatusByKey(item.key) }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车辆类型" class="right-margin">
          <a-select
              mode="multiple"
              v-model:value="deviceFormState.kind">
            <a-select-option v-for="vehicle in vehicleTypeDict.dict" :key="vehicle.vehicleCode" :value="vehicle.vehicleCode">
              {{ vehicle.vehicleName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="form-end">
          <a-button @click="resetForm">重置</a-button>
          <a-button
              @click="getDeviceList"
              :title="typeof deviceFormState.sectionId =='undefined'?'请选择归属标段':''"
              :disabled="typeof deviceFormState.sectionId =='undefined'"
              type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="content-box box-shadow">
      <div class="content-header">
        <span>查询列表</span>
        <a-button @click="openDeviceBaseInfoModal(null)" type="primary">新增</a-button>
      </div>
      <div class="content-table">
          <a-table
              :scroll="{y:setHeight('.content-box .content-table', 125) + 'px'}"
              :data-source="deviceList.deviceInfo"
              @change="nextDeviceList"
              :pagination="{
                'total':deviceList.totalCount,
                'pageSize':deviceList.everyPage,
                'showLessItems':true
              }"
              :rowKey="(record) => record.deviceId">
            <a-table-column
                title="归属标段"
                key="deviceId"
                data-index="sectionName">
            </a-table-column>
            <a-table-column title="车辆类型" data-index="deviceKind">
              <template #default="{text}">
                <div>{{vehicleTypeDict.getNameByCode(text)}}</div>
              </template>
            </a-table-column>
            <a-table-column title="车辆名称" data-index="deviceName"></a-table-column>
            <a-table-column title="设备编码" data-index="deviceSn"></a-table-column>
            <a-table-column title="车牌号码" data-index="deviceNumber"></a-table-column>
            <a-table-column title="审核状态" data-index="statusStr"></a-table-column>
            <a-table-column title="流程查看" width="80px">
              <template #default="{record}">
                <a-dropdown placement="bottomCenter">
                  <a @click.prevent>
                    <div class="icon-box">
                      <NodeIndexOutlined/>
                    </div>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <span @click="openAdmissionModal(record)" style="display:block; width: 66px; height: 30px; font-weight: 600; text-align: center; color: #001035; line-height: 30px">入&ensp;场</span>
                      </a-menu-item>
                      <a-menu-divider />
                      <a-menu-item>
                        <span @click="openExitModal(record)" style="display:block; width: 66px; height: 30px; font-weight: 600; text-align: center; color: #001035; line-height: 30px">退&ensp;场</span>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>
            </a-table-column>
            <a-table-column title="车辆颜色" data-index="deviceColor" width="80px">
              <template #default="{text}">
                <div :style="{'width':'20px','height':'20px','margin':'0 auto','background':text}"></div>
              </template>
            </a-table-column>
            <a-table-column title="基本信息" width="80px">
              <template #default="{text,record}">
                <div class="icon-box" @click="openDeviceBaseInfoModal(record)">
                  <FileTextOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="详细信息" width="80px">
              <template #default="{text,record}">
                <div class="icon-box" @click="openDeviceInfoModal(record.deviceKind,record.deviceId,record.status)">
                  <FileTextOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="图片信息">
              <template #default="{text,record}">
                <div style="display:flex;flex-direction: row;justify-content: center">
                  <div class="icon-box" style="margin-right: 12px" @click="addphoto(record)">
                    <PlusCircleOutlined/>
                  </div>
                  <div class="icon-box" @click="browsePhoto(record)">
                    <CameraOutlined/>
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="提交审核" width="80px">
              <template #default="{record}">
                <div class="icon-box" @click="openSubmitModal(record)">
                  <FileDoneOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="status">
              <template #default="{text,record}">
<!--                <span v-if="text == '2'"><a-tag color="green" @click="openWalkOn(record)" >返场</a-tag></span>-->
<!--                <span v-if="text == '0'"><a-tag color="red" @click="openWalkOff(record)">退场</a-tag></span>-->
                <div class="icon-box" @click="openWalkOff(record)">
                  <LogoutOutlined/>
                </div>
<!--                <span v-if="text == '1'"><a-tag color="orange">退场审核中</a-tag></span>
                <span v-if="text == '2'"><a-tag color="green">已退场</a-tag></span>-->
              </template>
            </a-table-column>
          </a-table>
      </div>
    </div>
  </div>
  <SModal
      :title="deviceBaseForm.deviceId>0?'更新车辆':'新增车辆'"
      width="684"
      height="320"
      :isShow="showDeviceBaseModal"
      @closed="()=>showDeviceBaseModal=!showDeviceBaseModal">
    <a-form
        ref="deviceBaseFormRef"
        class="device-set-form device-base-form"
        :model="deviceBaseForm"
        :rules="driverBaseRules"
        :labelCol="{style: 'width: 88px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-form-item name="deviceName" label="车辆名称">
        <a-input v-model:value="deviceBaseForm.deviceName" :disabled="updateDevInfo"/>
      </a-form-item>
      <a-form-item name="deviceKind" label="车辆类型">
        <a-select
          v-model:value="deviceBaseForm.deviceKind" :disabled="updateDevInfo">
          <a-select-option v-for="vehicle in vehicleTypeDict.dict" :key="vehicle.vehicleCode" :value="vehicle.vehicleCode">
            {{ vehicle.vehicleName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="sectionId" label="所属标段">
        <a-select
            v-model:value="deviceBaseForm.sectionId"
            :disabled="deviceBaseForm.deviceId>0 || updateDevInfo">
          <a-select-option
              v-for="section in sections"
              :key="section.sectionId" :value="section.sectionId">
            {{section.sectionName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="deviceSn" label="设备编码">
        <a-input v-model:value="deviceBaseForm.deviceSn" />
      </a-form-item>
      <a-form-item name="deviceNumber" label="车牌号码">
        <a-input v-model:value="deviceBaseForm.deviceNumber" :disabled="updateDevInfo"/>
      </a-form-item>
      <a-form-item name="deviceColor" label="设备颜色">
        <input v-model="deviceBaseForm.deviceColor" type="color"/>
      </a-form-item>
      <a-form-item name="button-box" class="button-item">
        <a-button @click="()=>showDeviceBaseModal=!showDeviceBaseModal">取消</a-button>
        <a-button @click="setDeviceBaseInfo" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(车辆)"
      width="362"
      height="513"
      :is-show="vehicleDeviceViewInfo.showModal"
      @closed="()=>vehicleDeviceViewInfo.showModal=false">
    <a-form
        ref="vehicleDeviceRef"
        class="device-set-form compaction-set-form"
        :model="vehicleDeviceInfo"
        :rules="vehicleDeviceRules"
        :labelCol="{style: 'width: 95px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-row>
        <a-form-item name="driverName" label="驾驶员">
          <a-input v-model:value="vehicleDeviceInfo.driverName" :disabled="disUpdateInfo"/>
        </a-form-item>
        <a-form-item name="identity" label="身份证号">
          <a-input v-model:value="vehicleDeviceInfo.identity" :disabled="disUpdateInfo"/>
        </a-form-item>
        <a-form-item name="driverPhone" label="联系人电话">
          <a-input v-model:value="vehicleDeviceInfo.driverPhone" :disabled="disUpdateInfo"/>
        </a-form-item>
        <a-form-item label="车队名称">
          <a-input v-model:value="vehicleDeviceInfo.driverTeam"/>
        </a-form-item>
        <a-form-item label="超速阈值">
          <a-input v-model:value="vehicleDeviceInfo.speedMax"/>
        </a-form-item>
        <a-form-item label="车辆品牌">
          <a-input v-model:value="vehicleDeviceInfo.brand"/>
        </a-form-item>
      </a-row>
      <a-form-item class="button-item" style="right: 0">
        <a-button @click="vehicleDeviceViewInfo.showModal=false">取消</a-button>
        <a-button @click="setVehicleDeviceInfo(()=>{vehicleDeviceViewInfo.showModal=false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="图片上传"
      width="620"
      height="450"
      :is-show="isShowImgdialog"
      @closed="closeImgList">
    <div class="image-content">
      <a-form
          :labelCol="{ style: 'width: 0px;' }"
          labelAlign="top">
        <a-form-item>
          <span>
            运输车辆：上传车辆正面、侧面粘贴车辆标识的照片，车辆行驶证照片、定位器照片。照片中车辆信息需明显;<br/>
            普通车辆：上传车辆正面、侧面45°照片，车辆行驶证照片;<br/>
            挖掘机、装载机等剩余车辆：上传合格证照片、车辆名牌照片、定位器照片、带有车辆标识的照片。
          </span>
        </a-form-item>
        <a-form-item label="" :colon="false" style="margin:0px">
          <a-upload
              list-type="picture-card"
              v-model:file-list="imgfileListBefore"
              style="width:68px;height:68px;"
              :action="uploadImgFile"
              :remove="deleteImgFile">
            <div>
              <div class="imgBack">
                <div class="imgUpload"></div>
              </div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </div>
    <div style="margin-top: 10px; position: absolute; right: 24px;">
      <a-button @click="closeImgList">取消</a-button>
      <a-button style="margin-left:8px " @click="comfitImgList" type="primary">确定</a-button>
    </div>
  </SModal>
  <SModal
      title="查看图片"
      width="466"
      height="320"
      :is-show="isShowImgDetaildialog"
      @closed="closeImgDetaildList">
    <div class="image-content-detail">
      <a-list :grid="{ gutter: 16, column: 4 }" :data-source="imgDetailList">
        <template #renderItem="{ item, index }">
          <a-list-item>
            <a-card
                @mouseenter="mouseenter(index,item)"
                @mouseleave="mouseleave(index,item)">
              <a-image :width="68" :height="68" :src="item.thumbUrl" style="position: absolute"/>
              <div class="del-icon-box" v-if="delIcon.inputAry[index] == true">
                <span class="del-icon-btn" title="删除文件" @click="deleteImgFileDetail(item)"><DeleteOutlined style="fontSize: 16px"/></span>
              </div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </SModal>
  <TipModal
      title="确定删除图片吗？"
      :image="warning"
      :isShow="showDelImgModal">
    <div class="submit-box">
      <div class="tip-content">删除后不可恢复</div>
      <div class="btn-box">
        <a-button class="left-btn" @click="()=>showDelImgModal = false">取消</a-button>
        <a-button class="right-btn" @click="defineDelImg" type="primary">确认</a-button>
      </div>
    </div>
  </TipModal>
  <TipModal
      title="确定提交审核吗？"
      :image="warning"
      :isShow="showSubmitModal">
    <div class="submit-box">
      <div class="tip-content">提交后不可修改信息</div>
      <div class="btn-box">
        <a-button class="left-btn" @click="()=>showSubmitModal = false">取消</a-button>
        <a-button class="right-btn" @click="commitDic" type="primary">确认</a-button>
      </div>
    </div>
  </TipModal>
  <!-- 入场 -->
  <SModal
      title="节点列表"
      width="1000"
      height="545"
      :isShow="showAdmissionModal"
      @closed="()=>showAdmissionModal=!showAdmissionModal">
    <div v-html="taskDetailHtml" style="width: 100%;height: 100%"></div>
  </SModal>
  <!-- 退场 -->
  <SModal
      title="节点列表"
      width="1000"
      height="545"
      :isShow="showExitModal"
      @closed="()=>showExitModal=!showExitModal">
    <div v-html="taskDetailHtml" style="width: 100%;height: 100%"></div>
  </SModal>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, createVNode, reactive} from "vue"
import {setHeight} from "@/utils/tableUtils"
import {vehicleBaseInfo,vehicleDevice} from "@/hooks/device/index"
import {useStore} from "vuex"
import vehicleTypeDict from "@/dicts/vehicleTypeDict"
import SModal from "@/components/SModal/index.vue"
import {EditOutlined, LogoutOutlined, FileTextOutlined, PlusCircleOutlined, CameraOutlined, ExclamationCircleOutlined, FileDoneOutlined, DeleteOutlined, NodeIndexOutlined} from '@ant-design/icons-vue'
import axios from "@/utils/axios";
import {message, Modal} from "ant-design-vue";
import EveryPageEnum from "@/enums/everyPageEnum";
import TipModal from "@/components/SModal/TipModal.vue";
import warning from "@/assets/image/warning.png"
import vehicleStatusDict from "@/dicts/vehicleStatusDict";

class DeviceFormState{
  sectionId: any | undefined = undefined
  kind: Array<number> = new Array<number>()
  status: number | undefined = 0
  deviceName: string | undefined = undefined
  deviceSn: string | undefined = undefined
  deviceSearch: string | undefined = undefined
  workToday: number | undefined
  checkStatus: number | undefined = undefined
  startPage: number | undefined = 1
  everyPage: number | undefined = EveryPageEnum.small
}
class DeviceBaseInfo{
  deviceId:number = -1
  deviceName:string|undefined = ""
  deviceSn:  string | undefined = undefined
  status:number = 0
  deviceKind:number|undefined
  deviceColor:string = "#000000"
  sectionId:number|undefined
  deviceNumber:string|undefined
}

export default defineComponent({
  setup(){
    const store = useStore();
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])));
    const { vehicleDeviceRef, vehicleDeviceViewInfo, vehicleDeviceInfo, vehicleDeviceRules, getVehicleDeviceInfo, setVehicleDeviceInfo} =vehicleDevice();

    // 表单对象
    const deviceRef = ref()
    // 表单内容
    const deviceFormState = ref(new DeviceFormState())
    // 当前已查询条件
    const deviceFormState2 = ref(new DeviceFormState())
    // 设备列表
    const deviceList:any = ref({})
    // 审核中、已通过的车辆不可修改详细信息
    const disUpdateInfo:any = ref(false)
    // 审核中、已通过的车辆不可修改信息
    const updateDevInfo:any = ref(false)

    // 表单对象
    const deviceBaseFormRef = ref()
    // 表单模态框
    const showDeviceBaseModal = ref(false)
    // 表单信息
    const deviceBaseForm = ref(new DeviceBaseInfo())
    // 表单验证规则
    const driverBaseRules = {
      deviceName:[{
        required: true,
        message: "设备名称不能为空",
        // message: '设备名称请在1-15字之间',
        type: 'string',
        trigger: 'blur'
      }],
      deviceKind:[{
        required: true,
        message: '请选择车辆类型',
        type: 'any',
        trigger: 'change'
      }],
      sectionId:[{
        required: true,
        message: '请选择归属标段',
        type: 'any',
        trigger: 'change'
      }],
      // deviceNumber:[{
      //   required: true,
      //   message: '请输入车牌号',
      //   type: 'string',
      //   trigger: 'change'
      // }],
      deviceNumber:[{
        required: true,
        // message: '请输入车牌号',
        validator:(rule:any,value:any,callback:any)=>{
          if (value) {
            const number = value
            if (number.length > 8) {
              return Promise.reject('输入车牌号长度不能超过八')
            } else {
              return Promise.resolve()
            }
          } else {
            return Promise.reject('请输入车牌号')
          }
        },
        trigger: 'blur'
      }]
    }

    let isShowImgdialog = ref(false)
    let isShowImgDetaildialog = ref(false)
    let imgfileListBefore = ref<any[]>([])

    let imgDetailList = ref<any[]>([])
    let theDeviceId =  ref(0)
    let tempBefore = ref<any[]>([])
    // 显示删除按钮
    const delIcon = reactive({
      inputAry: [] as boolean[]
    })
    const delIconInfo = ref()
    // 删除图片弹窗
    const showDelImgModal = ref<boolean>(false)

    // 行数据
    const recordInfo:any = ref()
    // 提交审核
    const showSubmitModal = ref<boolean>(false)

    // 入场审核弹窗
    const showAdmissionModal = ref(false)
    // 退场审核弹窗
    const showExitModal = ref(false)
    // 审核任务详情
    const taskDetailHtml:any = ref('')

    // 详细信息弹框
    const openDeviceInfoModal = (type:number, deviceId:number, checkStatus:number)=>{
      vehicleDeviceRef.value.resetFields()
      if (checkStatus == 0 || checkStatus == 3 || checkStatus == 5) {
        disUpdateInfo.value = false
      } else {
        disUpdateInfo.value = true
      }
      getVehicleDeviceInfo(deviceId,()=>{vehicleDeviceViewInfo.value.showModal = true})
    }

    // 重置
    const resetForm = ()=>{
      deviceFormState.value = new DeviceFormState()
    }
    // 查询在场的车辆
    const getDeviceList = ()=>{
      if(typeof deviceFormState.value.deviceName != 'undefined')
        deviceFormState.value.deviceName =
            (deviceFormState.value.deviceName as string).replace('/\\s+/g','')===""?undefined:deviceFormState.value.deviceName
      if(typeof deviceFormState.value.deviceSn != 'undefined')
        deviceFormState.value.deviceSn =
            (deviceFormState.value.deviceSn as string).replace('/\\s+/g','')===""?undefined:deviceFormState.value.deviceSn
      return new Promise((resolve,reject)=>{
        axios.post("/beta/findDevice",
            deviceFormState.value).then((res:any)=>{
          if(res.success){
            deviceFormState2.value = deviceFormState.value
            deviceList.value = res.data
            resolve(res)
          }else{
            message.info(res.msg)
            reject(false)
          }
        })
      })
    }
    const nextDeviceList = (pageInfo:any)=>{
      deviceFormState2.value.startPage = pageInfo.current
      axios.post("/beta/findDevice",
          deviceFormState2.value).then((res:any)=>{
        if(res.success){
          deviceList.value = res.data
        }else{
          message.info(res.msg)
        }
      })
    }
    // 新增、更改
    const setDeviceBaseInfo = ()=>{
      deviceBaseFormRef.value.validate().then(()=>{
        axios.post("/beta/updateDeviceInfoByDeviceId",
            deviceBaseForm.value).then((res:any)=>{
          if(res.success){
            if (deviceBaseForm.value.deviceId>0){
              let inDevice = deviceList.value.deviceInfo[deviceList.value.deviceInfo.findIndex((item:any)=>{
                return item.deviceId === deviceBaseForm.value.deviceId
              })]
              inDevice.deviceName = deviceBaseForm.value.deviceName
              inDevice.deviceKind = deviceBaseForm.value.deviceKind
              inDevice.deviceSn = deviceBaseForm.value.deviceSn
              inDevice.deviceNumber = deviceBaseForm.value.deviceNumber
              inDevice.deviceColor = deviceBaseForm.value.deviceColor
            }
            message.info("保存成功")
            showDeviceBaseModal.value = false
          }else{
            message.info(res.msg)
          }
        })
      }).catch((e:any)=>{
        console.log(e)
      })
    }
    // 打开基本信息弹窗
    const openDeviceBaseInfoModal = (oldInfo: any)=>{
      deviceBaseFormRef.value.resetFields()
      let deviceBaseForm2 = new DeviceBaseInfo()
      if(oldInfo){
        deviceBaseForm2.deviceId = oldInfo.deviceId
        deviceBaseForm2.deviceName = oldInfo.deviceName
        deviceBaseForm2.deviceSn = oldInfo.deviceSn
        deviceBaseForm2.status = oldInfo.deviceStatus
        deviceBaseForm2.deviceKind = oldInfo.deviceKind
        deviceBaseForm2.deviceColor = oldInfo.deviceColor
        deviceBaseForm2.deviceNumber = oldInfo.deviceNumber
        deviceBaseForm2.sectionId = oldInfo.idSection
        if (oldInfo.status == 0 || oldInfo.status == 3 || oldInfo.status == 5) {
          updateDevInfo.value = false
        } else {
          updateDevInfo.value = true
        }
      }
      Object.assign(deviceBaseForm.value, deviceBaseForm2)
      showDeviceBaseModal.value = true
    }

    // 设备退场
    const walkOff = (deviceId:number,callback:Function|null=null)=>{
      axios.post("/board/push/commitOutDevice", {deviceId: deviceId, kind: 1}).then((res:any)=>{
        if(res.success){
          message.info("退场审核提交成功")
          showDeviceBaseModal.value = false
          if(callback) callback()
        }else{
          message.info(res.msg)
        }
      })
    }
    // 设备进场
    const walkon = (deviceId:number,callback:Function|null=null)=>{
      axios.post("/beta/updateDeviceInfoByDeviceId", {deviceId: deviceId, status: 0}).then((res:any)=>{
        if(res.success){
          message.info("进场成功")
          showDeviceBaseModal.value = false
          if(callback) callback()
        }else{
          message.info(res.msg)
        }
      })
    }
    // 设备退场
    const openWalkOff = (deviceInfo:any)=>{
      if (deviceInfo.checkStatus == 2 || deviceInfo.status == 6) {
        Modal.confirm({
          title: `是否提交名称为${deviceInfo.deviceName}的设备退场申请?`,
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            walkOff(deviceInfo.deviceId,()=>{
              deviceInfo.outStatus = 1
              // deviceList.value.deviceInfo.splice(
              //     deviceList.value.deviceInfo.findIndex((item:any)=>{
              //       return item.deviceId == deviceInfo.deviceId
              //     },1)
              // )
            });
          }
        });
      } else if (deviceInfo.status == 0 || deviceInfo.status == 1 || deviceInfo.status == 3) {
        message.info("该车辆未入场")
      } else if (deviceInfo.status == 4) {
        message.info("已提起退场申请")
      } else if (deviceInfo.status == 5) {
        message.info("已退场，请勿重复提交")
      }
    }
    // 设备进场
    const openWalkOn = (deviceInfo:any)=>{
      Modal.confirm({
        title: `是否进场名称为${deviceInfo.deviceName},SN为${deviceInfo.deviceSn}的设备?`,
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          walkon(deviceInfo.deviceId,()=>{
            deviceInfo.deviceStatus = 0
          });
        }
      });
    }

    const closeImgList = () => {
      isShowImgdialog.value = false
      imgfileListBefore.value = []
    }
    const closeImgDetaildList = () => {
      isShowImgDetaildialog.value = false
      imgDetailList.value = []
    }
    const addphoto = (record: any) =>{
      theDeviceId.value = record.deviceId
      recordInfo.value = record
      imgfileListBefore.value = []
      tempBefore.value = []
      if (record.status === 0 || record.status === 3 || record.status === 5) {
        isShowImgdialog.value = true
      } else {
        message.info('状态处于审核中或者已经通过审核，请勿重复提交')
      }
    }
    const browsePhoto = (record: any) =>{
      theDeviceId.value = record.deviceId
      recordInfo.value = record
      imgDetailList.value = []
      fetchImgList(record.deviceId)
      isShowImgDetaildialog.value = true
    }
    const fetchImgList = (deviceId:any)=>{
      axios.post('common/findDevicePic', {deviceId:deviceId,kind:1}).then((res: any) => {
        if (res.success) {
          imgDetailList.value = []
          let imgLit = res.data.pic
          for (let i = 0; i < imgLit.length; i++) {
            let imgObj = imgLit[i]
            //图片数组
            let imgObjBefore = {
              thumbUrl: imgObj.path,
              uid: imgObj.id,
            }
            imgDetailList.value.push(imgObjBefore)
          }
        } else {
          message.info(res.msg)
        }
      })
    }

    // 图片上传
    const uploadImgFile = (e: any) => {
      const formData: any = new FormData()
      formData.append('mFile', e)
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = "https://zhihuigongdi.cn:6021/swfs/uploadSWFS"
        axios.post(url, formData, {
          headers: {'content-type': 'multipart/form-data',}
        }).then((res: any) => {
          console.log(res)
          if (res) {
            getFile(res)
          }
        }).catch(error => {
          message.info('上传失败')
        })
      }
    }
    const getFile = (imgUrl:any) => {
      imgfileListBefore.value = []
      console.log(imgUrl)
      let imgObj = {
        thumbUrl: imgUrl,
        uid: imgUrl
      }
      tempBefore.value.push(imgObj)
      for (let i = 0; i < tempBefore.value.length; i++) {
        imgfileListBefore.value.push(tempBefore.value[i])
      }
    }
    // 车辆45°照片删除
    const deleteImgFile = (e: any) => {
      for (let i = 0; i < tempBefore.value.length; i++) {
        if (e == tempBefore.value[i]) {
          tempBefore.value.splice(i, 1)
          imgfileListBefore.value.splice(i, 1)
          return
        }
      }
    }
    // 显示删除按钮
    const mouseenter = (index:number, item:any) => {
      delIcon.inputAry[index] = true
    }
    const mouseleave = (index:number, item:any) => {
      delIcon.inputAry[index] = false
    }
    const deleteImgFileDetail = (e:any) => {
      if (recordInfo.value.checkStatus == 0 || recordInfo.value.checkStatus == 3) {
        showDelImgModal.value = true
        delIconInfo.value = e
      } else {
        message.info("车辆审核中或已通过审核")
      }
    }
    // 确定删除
    const defineDelImg = () => {
      for (let i = 0; i < imgDetailList.value.length; i++) {
        if (delIconInfo.value == imgDetailList.value[i]) {
          let imgObj = imgDetailList.value[i]
          let obj =  JSON.parse(JSON.stringify(imgObj))
          let index =  JSON.parse(JSON.stringify(i))
          delImg(index,obj.uid)
          imgDetailList.value.splice(i , 1)

        }
      }
    }
    const delImg = (index:number,uid:any)=>{
      let requestObj = {
        deviceId:theDeviceId.value,
        kind:1,
        picId:[uid]
      }
      axios.post('common/deleteDevicePic', requestObj).then((res:any) => {
        if (res.success) {
          message.info("删除成功")
          showDelImgModal.value = false
        } else {
          message.info(res.msg)
        }
      })
    }

    const comfitImgList = () => {
      let lastAry = []
      for (let i = 0; i < imgfileListBefore.value.length; i++) {
        let obj = {
          path: imgfileListBefore.value[i].thumbUrl
        }
        lastAry.push(obj)
      }
      console.log("上传数组")
      console.log(lastAry)
      let queryForm = {
        deviceId: theDeviceId.value,
        kind:1,
        pic: lastAry
      }

      axios.post('common/saveDevicePic', queryForm).then((res: any) => {
        if (res.success) {
          imgfileListBefore.value = []
          isShowImgdialog.value = false
          message.info("保存成功")
        } else {
          message.info(res.msg)
        }
      })
    }


    // 提交审核
    const openSubmitModal = (record:any) =>{
      if (record.status == 0 || record.status == 3 || record.status == 5) {
        recordInfo.value = record
        showSubmitModal.value = true
      } else if (record.status == 1 || record.status == 4) {
        message.info('车辆审核中无需重复提交')
      } else if (record.status == 2 || record.status == 6) {
        message.info('车辆已通过审核无需重复提交')
      }
    }
    const commitDic = () =>{
      axios.post('/board/push/commitDevice', {deviceId: recordInfo.value.deviceId, kind: 1}).then((res:any) => {
        if (res.success) {
          message.info('审核已提交')
          showSubmitModal.value = false
          recordInfo.value.checkStatus = 1
          recordInfo.value.checkStatusStr = '审核中'
        } else {
          message.info(res.msg)
        }
      })
    }

    // 审批处理详情
    const getTaskDetailHtml = (taskId:any) =>{
      let url = 'https://zhihuigongdi.cn:6033/flowTask/getTaskDetailPage/?id=' + taskId
      axios.get(url,
          {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then((res:any)=>{
        taskDetailHtml.value = res
      })
    }

    // 打开入场审批处理详情弹窗
    const openAdmissionModal = (record:any) =>{
      // taskDetailHtml.value = null
      if (record.checkStatus != 0 && record.outStatus == 0) {
        showAdmissionModal.value = true
        admissionFlowPath(record.deviceId).then((res:any)=>{
          if (res.code == 0) {
            getTaskDetailHtml(res.data.id)
          }
        })
      } else {
        message.info("审核任务不存在")
      }
    }
    // 入场审批获取
    const admissionFlowPath = (deviceId:any) =>{
      return new Promise((resolve, reject)=>{
        let url = 'https://zhihuigongdi.cn:6033/flowTask/getFlowTaskID?taskObjID=v' + deviceId + '&flowTypeID=2'
        axios.get(url,
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res:any)=>{
          if (res.code == 0) {
            resolve(res)
          } else {
            reject(false)
          }
        })
      })
    }

    // 打开退场审批处理详情弹窗
    const openExitModal = (record:any) =>{
      // taskDetailHtml.value = null
      if (record.outStatus != 0) {
        showExitModal.value = true
        exitFlowPath(record.deviceId).then((res:any)=>{
          if (res.code == 0) {
            getTaskDetailHtml(res.data.id)
          }
        })
      } else {
        message.info("审核任务不存在")
      }
    }
    // 退场审批获取
    const exitFlowPath = (deviceId:any) =>{
      return new Promise((resolve, reject)=>{
        let url = 'https://zhihuigongdi.cn:6033/flowTask/getFlowTaskID?taskObjID=v' + deviceId + '&flowTypeID=8'
        axios.get(url,
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res:any)=>{
          if (res.code == 0) {
            resolve(res)
          } else {
            reject(false)
          }
        })
      })
    }

    onMounted(()=>{
      if(sections.value.length>0){
        // deviceFormState.value.sectionId = sections.value[0].sectionId
        getDeviceList()
      }
    })
    return{
      setHeight,

      // 查询设备列表
      sections,
      vehicleTypeDict,
      vehicleStatusDict,
      deviceRef,
      deviceFormState,
      deviceList,
      resetForm,
      getDeviceList,
      nextDeviceList,
      openDeviceInfoModal,

      // 编辑基本信息
      deviceBaseFormRef,
      showDeviceBaseModal,
      deviceBaseForm,
      driverBaseRules,
      updateDevInfo,
      openWalkOff,
      openWalkOn,
      setDeviceBaseInfo,
      openDeviceBaseInfoModal,


      //车辆
      vehicleDeviceRef,
      vehicleDeviceViewInfo,
      vehicleDeviceInfo,
      vehicleDeviceRules,
      getVehicleDeviceInfo,
      setVehicleDeviceInfo,

      disUpdateInfo,

      deleteImgFileDetail,
      isShowImgDetaildialog,
      imgDetailList,
      closeImgDetaildList,
      comfitImgList,
      deleteImgFile,
      tempBefore,
      uploadImgFile,
      isShowImgdialog,
      closeImgList,
      imgfileListBefore,
      showDelImgModal, delIcon, delIconInfo,
      addphoto,
      browsePhoto,
      mouseenter, mouseleave,
      defineDelImg,
      warning,
      recordInfo,
      showSubmitModal,
      openSubmitModal, commitDic,

      // 流程查看
      showAdmissionModal,
      showExitModal,
      taskDetailHtml,

      getTaskDetailHtml,
      openAdmissionModal,
      admissionFlowPath,
      openExitModal,
      exitFlowPath,
    }
  },
  components:{
    SModal,
    TipModal,
    EditOutlined,
    LogoutOutlined,
    FileTextOutlined,
    PlusCircleOutlined,
    CameraOutlined,
    FileDoneOutlined,
    DeleteOutlined,
    NodeIndexOutlined
  }
})
</script>

<style lang="scss" scoped>
.device-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .search-box{
    display: flex;
    width: 100%;
    height: 128px;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
    flex-shrink: 0;
    ::v-deep label{
      color: #666;
    }
    ::v-deep .ant-form{
      width: 100%;
      //height: 40px;
    }
    ::v-deep .ant-form-item {
      margin: 8px 0;
    }
    .right-margin {
      margin-right: 87px;
    }
    ::v-deep .ant-select{
      width: 240px;
    }
    ::v-deep .ant-input{
      width: 240px;
    }
    ::v-deep .ant-select-multiple{
      width: 300px;
    }
    ::v-deep .ant-form-item-with-help{
      margin-bottom: 0px
    }
    .form-end{
      float: right;
      ::v-deep button{
        margin-left: 12px;
      }
    }
  }
  .content-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 0 38px;
    box-sizing: border-box;
    .content-header{
      display: flex;
      width: 100%;
      padding: 18px 0 12px;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      span{
        display: block;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
      }
      ::v-deep button{
        margin-right: 16px;
        margin-left: auto;
      }
    }
    .content-table{
      flex: 1;
      width: calc(100% - 16px);
    }
  }
}
.device-set-form{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  box-sizing: border-box;
  ::v-deep .ant-form-item-with-help {
    margin-bottom: 0px !important;
  }
  ::v-deep .ant-form-item{
    margin-bottom: 23px;
  }
  ::v-deep .ant-form-item:nth-of-type(2n){
    margin-right: 0px;
  }
  .button-item{
    position: absolute;
    right: 24px;
    bottom: 0px;
    margin-right: 0;
    ::v-deep button{
      margin-left: 8px;
    }
  }
}
.device-base-form{
  ::v-deep .ant-input{
    width: 210px;
  }
  ::v-deep .ant-select{
    width: 210px;
  }
}
.tamp-set-form{
  ::v-deep .ant-input-number{
    width: 176px;
  }
}
.pav-set-form{
  .pav-set-center{
    padding-left: 16px;
    height: 16px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 16px;
  }
  ::v-deep .ant-alert-with-description{
    padding: 8px;
  }

}
.compaction-set-form{
  .compaction-set-title{
    padding-left: 16px;
    height: 39px;
    line-height: 39px;
    box-sizing: border-box;
  }
  ::v-deep .ant-form-item{
    margin-right: 0px;
  }
  ::v-deep .ant-input-number{
    width: 148px;
  }
}
.image-content-detail {
  margin-left: 0px;
  margin-top: 20px;
  position: relative;
  height: 220px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  ::v-deep .ant-list-item {
    //width: 90px;
    margin-bottom: 12px;
  }
  ::v-deep .ant-card {
    width: 90px;
  }
  ::v-deep .ant-card-body {
    width: 88px;
    height: 88px;
    padding: 10px;
  }
  ::v-deep .ant-image-img {
    width: 68px;
    height: 68px;
  }
  .del-icon-box {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 10px;
    left: 60px;
    z-index: 10;
    //background-color: rgba(0, 0, 0, 0.1);
    .del-icon-btn {
      display: block;
      width: 16px;
      height: 16px;
      //position: relative;
      //top: 25px;
      //left: 27px;
    }
  }
}
.image-content {
  padding-top: 20px;
  position: relative;
  width: 580px;
  height: 330px;
  overflow-y: auto;
  overflow-x: hidden;

  .imgBack {
    background: url('../../../assets/image/imgBack.png') center no-repeat;
    width: 50px;
    height: 50px;
    .imgUpload {
      background: url('../../../assets/image/imgUpload.png') no-repeat center;
      height: 58px;
      width: 58px;
      /* margin: 0 auto; */
      /* margin-right: 5px; */
      position: relative;
      right: 5px;
      bottom: 5px;
    }
  }
  .ant-form-item {
    margin-bottom: 12px;
    ::v-deep .ant-tooltip-open .ant-upload-list-item .ant-upload-list-item-error {
      display: none;
    }
    ::v-deep .ant-upload-picture-card-wrapper {
      width: 580px;
    }
    ::v-deep .ant-upload-list-picture-card-container {
      width: 68px;
      height: 68px;
    }
    ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
      width: 68px;
      height: 68px;
      margin: 0px;
      margin-right: 12px;
    }
    ::v-deep .ant-upload-list-picture .ant-upload-list-item,
    ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
      padding: 0px;
    }
    ::v-deep .ant-upload-list-item {
      margin-top: 0px;
    }
    ::v-deep .ant-upload.ant-upload-select-picture-card {
      width: 68px;
      height: 68px;
      background: #e6f1fc;
      border-radius: 2px;
      border: 1px solid #1677ff;
    }
    .fileShowCls {
      width: 144px;
      height: 40px;
      background: #e6f1fc;
      display: inline-block;
      opacity: 0.66;
      float: left;
      margin-right: 8px;
      margin-bottom: 4px;
      ::v-deep .ant-image {
        position: relative;
        top: -9px;
      }
      .filenamecls {
        width: 78px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        margin-left: 8px;
        margin-right: 8px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 24px;
        line-height: 24px;
        margin-top: 8px;
        cursor: pointer;
      }
      .delfilenamecls {
        font-size: 12px;
        font-weight: 400;
        color: #1677ff;
        line-height: 17px;
        width: 24px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: -8px;
      }
    }
    .uploadFileBtn {
      width: 80px;
      // height: 32px;
      background: #e6f1fc;
      border: 1px solid #1677ff;
      font-size: 14px;
      font-weight: 400;
      color: #1677ff;
      border-radius: 2px;
      height: 40px;
      position: absolute;
      left: 0px;
      display: inline-block;
      z-index: -1;
    }
    .reportUploadDiv {
      ::v-deep .ant-upload-list-item {
        width: 228px;
      }
    }
  }
  .button-item {
    position: absolute;
    margin-top: 50px;
    right: 24px;
    bottom: 0px;
    margin-right: 0;
  }
}
.submit-box {
  display: flex;
  flex-direction: column;
  .tip-content {
    margin-left: 6px;
    color: #FF9C01;
    font-size: 12px;
  }
  .btn-box {
    display: flex;
    flex-direction: row;
    .left-btn {
      margin-top: 21px;
      margin-left: 52px;
      height: 28px;
      width: 64px;
      background: #E6F1FC;
      color: #1677FF;;
    }
    .right-btn{
      margin-top: 21px;
      margin-left: 8px;
      height: 28px;
      width: 64px;
      background: #1677FF;
    }
  }
}
</style>
